/*公用浮层*/
import React from "react";
import { Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import "./index.scss";
export default ({ position = "bottom", children, visible, onClose, zIndex }) => {
  const classNames = {
    bottom: {
      show: "DrawerInfo_pop_bottom DrawerInfo_bottom_show",
      hide: "DrawerInfo_pop_bottom DrawerInfo_bottom_hide",
    },
    left: {
      show: "DrawerInfo_pop_left DrawerInfo_left_show",
      hide: "DrawerInfo_pop_left DrawerInfo_left_hide",
    },
    right: {
      show: "DrawerInfo_pop_right DrawerInfo_right_show",
      hide: "DrawerInfo_pop_right DrawerInfo_right_hide",
    },
    top: {
      show: "DrawerInfo_pop_top DrawerInfo_top_show",
      hide: "DrawerInfo_pop_top DrawerInfo_top_hide",
    },
  }[position];
  return (
    <View style={{ zIndex: zIndex }} className="DrawerInfo_box" onClick={onClose}>
      <View
        catchMove
        className={visible ? "DrawerInfo_fixed" : "DrawerInfo_fixed_hide"}
      ></View>
      <View className={visible ? classNames.show : classNames.hide}>
        <View className="DrawerInfo_pop_content"> {children && children}</View>
      </View>
    </View>
  );
};
